<template>
    <div class="address"  @click="close">
      <div :style="mystyle" @click.stop="">
        <h3>请选择</h3>
        <div class="hasChoose">
          <span @click="afreshProvince">{{choose.province.name}}</span>
          <span @click="afreshCity">{{choose.city.name}}</span>
          <span>{{choose.area.name}}</span>
        </div>
        <div class="addItem" v-if="isShow === 'province'">
          <p>选择省份/地区</p>
          <ul>
            <li v-for="item in provinces" @click="chooseProvince(item)" :class="{'click':item.id===choose.province.id}">{{item.name}}</li>
          </ul>
        </div>
        <div class="addItem" v-if="isShow === 'city'">
          <p>选择城市</p>
          <ul>
            <li v-for="item in city" @click="chooseCity(item)">{{item.name}}</li>
          </ul>
        </div>
        <div class="addItem" v-if="isShow === 'area'">
          <p>选择区/县</p>
          <ul>
            <li v-for="item in area" @click="chooseArea(item)">{{item.name}}</li>
          </ul>
        </div>
        <i class="iconfont icon-x" @click="close"></i>
      </div>
    </div>
</template>

<script>
  import provinces from './../../util/provinces'

  export default {
      name: "Address",
      data(){
        return {
          isShow:'province',
          provinces:provinces,
          city:[],
          area:[],
          choose:{
            province:{},
            city:{},
            area:{},
          }
        }
      },
      props:['mystyle'],
      methods:{
        close(){
          this.$emit('closeAddress')
        },
        chooseProvince(item){
          this.choose.province = item;
          this.choose.city = {};
          this.choose.area = {};
          if([1,18,790,2236,3609,3628].includes(item.id)){
            this.choose.city.name = item.name;
            this.isShow = 'area';
            this.$api.getAreas({city_id:item.id}).then((res)=>{
              this.area = res.data
            })
          }else {
            this.isShow = 'city';
            this.$api.getAreas({city_id:item.id}).then((res)=>{
              this.city = res.data
            })
          }
        },
        chooseCity(item){
          this.choose.city = item;
          this.choose.area = {};
          this.isShow = 'area';
          this.$api.getAreas({city_id:item.id}).then((res)=>{
            this.area = res.data
          })
        },
        chooseArea(item){
            this.choose.area = item;
            console.log(this.choose);
            this.$emit('getAddress',this.choose)

        },
        afreshProvince(){
          this.isShow = 'province';
        },
        afreshCity(){
            this.isShow = 'city';
        }
      }
    }
</script>

<style lang="scss" scoped>
  .address{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 666;
    .icon-x{
      position: absolute;
      right: 0;
      top: 0;
      font-size: 50px;
      line-height: 50px;
      margin: 20px 20px 0 0;
    }
    >div{
      width: 100%;
      height: 70%;
      background: #fff;
      position: absolute;
      left: 0;
      bottom: 0;
      padding: 0 30px;
      transform: translateY(100%);
      transition: all 0.5s ease;
      z-index: 9999;
      font-size: 30px;
      .hasChoose{
        line-height: 40px;
      }
      h3{
        line-height: 80px;
        font-size: 30px;
        text-align: center;
      }
      .addItem{
        height: calc(100% - 80px);
        overflow: auto;
        p{
          color:#999 ;
        }
        ul{
          height: calc(100% - 100px);
          overflow: auto;
          li{
            line-height: 50px;
          }
        }
      }
    }
  }
</style>
